<template>
	<view class="nav-bar">
		<view class="swiper-view" v-if="swiperType === '1'">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" class="swiper" @change="changeCurrent">
				<swiper-item v-for="(item, index) in list" :key="index">
					<image class="swiper-image" @click="goTo(item)" :src="typeof item === 'object'?item.image :item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="w-100 flex j-c-c indicator-dots" :style="{bottom}">
				<view class="flex">
					<block v-for="(item, index) in length" :key="index">
						<view class="dots-item" :class="current === index?'active'+activeType:'unactive'+activeType">
							<text style="opacity: 0;">1</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="swiper-view2" v-if="swiperType === '2'">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" style="width: 100%;height: 100%;">
				<swiper-item v-for="(item, index) in list" :key="index">
					<image class="gift-image" :src="item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="dots-view color-fff80 f-s-22">
				{{current || 0}}/{{list.length || 0}}
			</view>
		</view>
	</view>
</template>

<script>
	import {goTo,goSwitch} from "@/nav.js"
	export default {
		props:{
			bottom:{
				type:String,
				default:'22rpx;'
			},
			list:{
				type:Array,
				default(){
					return []
				}
			},
			swiperType:{
				type:String,
				default:"1"
			},
			activeType:{
				type:String,
				default:"1"
			}
		},
		computed:{
			length(){
				return this.list.length
			}
		},
		data() {
			return {
				current:1
			}
		},
		mounted() {
			
		},
		methods: {
			goTo(item){
				if(!item.url)return
				let url_arr = [
					"/pages/index/index",
					"/pages/my/index",
					"/pages/circle/index",
					"/pages/live/index/index",
					"/pages/findCar/index"
				]
				goSwitch({url:item.url})
				// console.log(url_arr.includes(item.path))
			},
			changeCurrent(e){
				this.current = e.detail.current
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-view2{
		width: 750upx;
		height: 540upx;
		position: relative;
		background-color: #FFFFFF;
		.gift-image{
			width: 100%;
			height: 100%;
		}
		.dots-view{
			padding: 4upx 20upx;
			border-radius: 22upx;
			background: rgba(0,0,0,0.7);
			position: absolute;
			bottom: 20upx;
			right: 38upx;
			z-index: 2;
		}
	}
	.swiper-view{
		position: relative;
		.indicator-dots{
			position: absolute;
			// right: 28upx;
			z-index: 6;
			bottom: 10upx;
			.dots-item{
				height: 8upx;
				margin-right: 6upx;
				width: 8upx;
			}
			.active1{
				width: 12upx;
				background: #FFFFFF;
				border-radius: 4upx;
			}
			.unactive1{
				width: 8upx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.5);
			}
			.unactive2{
				width: 8upx;
				border-radius: 50%;
				background: rgba(255, 255, 255, 1);
			}
			.active2{
				width: 12upx;
				background: #EE8300;
				border-radius: 4upx;
			}
		}
	}
	.swiper{
		width: 694upx;
		height: 280upx;
		.swiper-image{
			width: 694upx;
			height: 280upx;
		}
	}
</style>